<template>
  <div class="edit-check">
    <head-top head-title="编辑查验" goBack="true" editCheck="重新发布" @editAllCheck="editAllCheck"></head-top>
    <div class="lift-num" v-show="liftNum != '0'">
      <mt-cell title="电梯编号" :value="liftNum"></mt-cell>
    </div>
    <div class="check-content" v-for="(item,index) in checkContent" :key="index"  @click="$router.push(`/my/EditCheckEvery/${$route.params.id}/${item.id}/${item.name}/${liftNum}`)">
      <mt-cell :title="item.name" is-link>
      <!-- <mt-cell :title="item.name" is-link v-for="(item,index) in checkContent" :key="index" :to="$router.push(`/my/EditCheckEvery/${item.id}/${categoryid}/${item.name}`)"> -->
        <span v-show="item.status === 0" style="color: #0078de; font-size: 13px">开始查验</span>
        <span v-show="item.status === 2" style="font-size: 13px">已查验完</span>
        <span v-show="item.status === 1" style="color: red; font-size: 13px">未查验完</span>
      </mt-cell>
    </div>
    <div class="content">
      <div class="line border-bottom">
        整改意见
      </div>
      <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="请对查验的结果进行描述..." cols="30" rows="10" v-model="summary"
                maxlength="5000"></textarea>
      <div class="count">
        {{currentCount}}/{{totalCount-currentCount}}
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {editCheckContent, submitEditCheckEvery} from '../../api/my.js'
import {Toast} from 'mint-ui'

export default {
  name: 'EditCheck',
  data() {
    return {
      checkContent: [],
      liftNum: '',
      totalCount: 5000,
      currentCount: 0,
      summary: ''
    }
  },
  created() {
    this._getCheckContent()
  },
  components: {
    headTop
  },
  methods: {
    // 字体有没有超过预定值
    writeContent() {
      this.currentCount = this.summary.length
      let remainCount = this.totalCount - this.currentCount
      if (!remainCount) {
        Toast({
          message: '字数不能超过5000',
          position: 'middle',
          duration: 1000
        })
      }
    },
    _getCheckContent() {
      editCheckContent(this.$route.params.id, this.$route.params.categoryid).then(res => {
        if (res.code === 200) {
          this.checkContent = res.data.data
          this.liftNum = res.data.project.lift_num
          this.summary = res.data.project.summary
          this.currentCount = this.summary.length
        }
      })
    },
    editAllCheck() {
      submitEditCheckEvery(this.$route.params.id, this.summary).then(res => {
        if (res.code === 200) {
          Toast({
            message: '发布成功',
            position: 'middle',
            duration: 1000
          })
          history.replaceState({}, '', '/my/MyCheck')
          // this.$router.push(`/CheckDetailList/${this.$route.params.id}`)
          this.$router.push(`/CheckDetail/${this.$route.params.id}`)
        } else {
          Toast({
            message: '发布失败',
            position: 'middle',
            duration: 1000
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .edit-check{
    padding-top: 40px;
    .mint-cell-value.is-link{
      margin-right: 12px;
    }
    .mint-cell:last-child{
      background-size: 100% 0px;
    }
    .mint-cell-wrapper{
      background-size: 100% 1px;
    }
    .content {
      padding: 10px;
      position: relative;
      border-top: 10px solid #f2f2f2;
      .line {
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px;
      }
      textarea {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        height: 120px;
        background: #f2f2f2;
        border-radius: 7px;
        resize: none;
        outline: none;
        border: none;
        font-size: 12px;
        line-height: 16px;
      }
      .count {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #0078de;
      }
    }
  }
</style>
